<template>
	<div id="customer">
		<template>
			<el-form :inline="true" :model="searchCustForm" class="demo-form-inline">
				<el-button type="primary" @click="preSaveCustomer">添加</el-button>
				&nbsp;&nbsp;&nbsp;
				<el-form-item label="搜索条件">
					<el-input v-model="searchCustForm.searchCondition" required="true" placeholder="搜索条件">
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="listCustomer">搜索</el-button>
				</el-form-item>
			</el-form>

			<el-table :data="custList" stripe style="width: 100%">
				<el-table-column prop="cid" label="客户编号" width="180">
				</el-table-column>
				<el-table-column prop="custName" label="客户名称" width="180">
				</el-table-column>
				<el-table-column prop="custAddress" label="客户地址" width="180">
				</el-table-column>
				<el-table-column prop="custMobile" label="联系方式" width="180">
				</el-table-column>
				<el-table-column prop="custTicket" label="水票数量" width="180">
				</el-table-column>
				<el-table-column label="操作" width="200px">
					<template slot-scope="scope">
						<!-- 删除按钮 -->
						<el-button type="primary" icon="el-icon-delete" @click="deleteCust(scope.row.cid)">
						</el-button>
						<!-- 修改按钮 -->
						<el-button type="danger" icon="el-icon-edit" @click="preUpdateCust(scope.row.cid)">
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination background layout="sizes,prev, pager, next,jumper,->,total" :page-size.sync="pageSize"
				:current-page.sync="pageNum" :page-sizes="[5,10,20]" :total="total" :hide-on-single-page="true"
				@current-change="listCustomer" @size-change="listCustomer">
			</el-pagination>

			<!-- 
				“添加送水工”对话框
				addBox是一个标志变量：true显示对话框，否则隐藏对话框
				handleClose：对话框关闭之前执行的动作
				addCustDataForm是一个表单，用来存放要添加的客户数据
			 -->
			<el-dialog title="添加客户" :visible.sync="addBox" width="50%" :before-close="handleClose">
				<el-form ref="addCustDataForm" label-width="100px" v-model="addCustDataForm">
					<el-form-item label="客户名称:">
						<el-input placeholder="请输入客户名字" maxlength="50" v-model="addCustDataForm.custName" />
					</el-form-item>
					<el-form-item label="客户地址:">
						<el-input placeholder="请输入客户地址" maxlength="50" v-model="addCustDataForm.custAddress" />
					</el-form-item>
					<el-form-item label="联系方式:">
						<el-input placeholder="请输入客户联系方式" maxlength="50" v-model="addCustDataForm.custMobile" />
					</el-form-item>
					<el-form-item label="水票数量:">
						<el-input placeholder="请输入水票数量" maxlength="50" v-model="addCustDataForm.custTicket" />
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button type="primary" @click="saveCustomer">确 定</el-button>
				</span>
			</el-dialog>

			<!-- 
			  修改客户对话框 
			  updateBox表示修改对话框显示和隐藏的标志：true显示，false隐藏
			  updateHandleClose表示关闭窗体之前发生的动作
			-->
			<el-dialog title="修改客户" :visible.sync="updateBox" width="50%" :before-close="updateHandleClose">
				<el-form ref="updateCustDataForm" label-width="100px" v-model="updateCustDataForm">
					<el-form-item label="客户名称:">
						<el-input placeholder="请输入客户名字" maxlength="50" v-model="updateCustDataForm.custName" />
					</el-form-item>
					<el-form-item label="客户地址:">
						<el-input placeholder="请输入客户地址" maxlength="50" v-model="updateCustDataForm.custAddress" />
					</el-form-item>
					<el-form-item label="联系方式:">
						<el-input placeholder="请输入客户联系方式" maxlength="50" v-model="updateCustDataForm.custMobile" />
					</el-form-item>
					<el-form-item label="水票数量:">
						<el-input placeholder="请输入水票数量" maxlength="50" v-model="updateCustDataForm.custTicket" />
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button type="primary" @click="updateCustomer">确 定</el-button>
				</span>
			</el-dialog>

		</template>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				// 存储后端返回给前端的客户列表
				custList: [],
				// “添加客户”对话框 隐藏和显示的标志变量，false表示隐藏
				addBox: false,
				// “修改客户”对话框 隐藏和显示的标志变量，false表示隐藏
				updateBox: false,
				// “添加客户”对话框的表单
				addCustDataForm: {
					custName: '',
					custAddress: '',
					custMobile: '',
					custTicket: ''
				},
				// 新增加 总行数、当前页、每页个数
				total: 0,
				pageNum: 1,
				pageSize: 5,
				// “修改客户”对话框的表单
				updateCustDataForm: {
					cid: '',
					custName: '',
					custAddress: '',
					custMobile: '',
					custTicket: ''
				},
				// 搜索表单
				searchCustForm: {
					searchCondition: ''
				},
			}
		},
		methods: {
			listCustomer() {
				let src = '';
				if (this.searchCustForm.searchCondition != null && this.searchCustForm.searchCondition.length != 0) {
					// 搜索框内拥有搜索条件时
					src = 'http://localhost:8097/cust/searchCustomer/' + this.pageNum + '/' + this.pageSize + '/' +
						this.searchCustForm.searchCondition;
				} else {
					// 搜索框内没有搜索条件时
					src = "http://localhost:8097/cust/listCustPage/" + this.pageNum + "/" + this.pageSize;
				}
				this.$axios.get(src).then((resp) => {
					this.custList = resp.data.responseData.list;
					this.total = resp.data.responseData.total;
					this.pageNum = resp.data.responseData.pageNum;
				}).catch((error) => {
					console.log(error);
					this.$message.error("客户列表请求发送失败");
					return;
				})
			},

			// 预添加客户信息，弹出“添加客户”对话框
			preSaveCustomer() {
				this.addBox = true;
			},
			// 关闭对话框之前做的动作
			handleClose(done) {
				// 清空上一次表单数据
				this.addCustDataForm.custName = '';
				this.addCustDataForm.custAddress = '';
				this.addCustDataForm.custMobile = '';
				this.addCustDataForm.custTicket = '';
				// 关闭对话框
				done();
			},
			// 提交对话框添加客户信息
			saveCustomer() {
				this.$axios.post('http://localhost:8097/cust/saveCust', {
					// 前端使用JSON格式将表单参数传入给后端
					custName: this.addCustDataForm.custName,
					custMobile: this.addCustDataForm.custMobile,
					custAddress: this.addCustDataForm.custAddress,
					custTicket: this.addCustDataForm.custTicket
				}).then((resp) => {
					// 接受后端返回给前端你的消息
					// 条件成立：表示插入成功，给客户成功的提示，否则给客户失败的提示
					if (resp.data.responseData == true) {
						this.$message.success("添加成功");
					} else {
						this.$message.error("添加失败");
					}
					// 重新查询客户信息
					this.listCustomer();
					// 关闭对话框
					this.addBox = false;
				}).catch((error) => {
					this.$message.error("添加客户请求发送失败");
					console.log(error);
				})
			},

			// 根据客户ID删除客户信息
			deleteCust(cid) {
				this.$confirm("确定要删除吗", "提示", {
						confirmButtonText: '确定',
						cannelButtonText: '取消',
						type: '警告'
					})
					// 点击确定执行删除操作
					.then(() => {
						// 删除操作之前先做check(验证当前客户有没有管理送水历史，如果有提示用户该客户有
						// 对应的送水历史关联)
						this.$axios.get('http://localhost:8097/history/getHistoryCountByCustId/' + cid)
							// then方法的resp参数封装了后端返回给前端的数据
							.then((resp => {
								// 条件成立：表示该客户有对应的送水历史关联，阻止删除
								if (resp.data.responseData > 0) {
									this.$message.error("删除失败：该客户有对应的送水历史关联")
									return false;
								}
								this.$axios.get('http://localhost:8097/cust/deleteCust/' + cid)
									.then((resp) => {
										// 条件成立：受影响行数为1，删除成功
										if (resp.data.responseData == true) {
											this.$message.success("删除成功");
										} else {
											this.$message.error("删除失败");
										}
										this.listCustomer();
									}).catch((error) => {
										this.$message.error("删除客户信息请求发送失败");
										console.log(error);
									})
							}))
					})
			},

			// 关闭修改对话框之前的操作
			updateHandleClose(done) {
				this.updateCustDataForm.cid = '',
					this.updateCustDataForm.custName = '';
				this.updateCustDataForm.custAddress = '';
				this.updateCustDataForm.custMobile = '';
				this.updateCustDataForm.custTicket = '';
				// 关闭
				done();
			},
			// 修改之前的数据回显
			preUpdateCust(cid) {
				this.$axios.get('http://localhost:8097/cust/getCustById/' + cid)
					.then((resp) => {
						// 条件成立：表示能够从后端获取对应的客户信息，完成数据回显
						if (resp.data.responseMessage == 'ok') {
							// 显示“修改客户”对话框
							this.updateBox = true;
							// 将后端的客户信息赋值给前端定义的修改表单
							this.updateCustDataForm = resp.data.responseData;
						} else {
							this.$message.error("没有找到对应的客户信息");
						}
					})
					.catch((error) => {
						this.$message.error("修改客户信息数据回显请求发送失败");
						console.log(error);
					})
			},
			// 修改客户信息
			updateCustomer() {
				this.$axios.post('http://localhost:8097/cust/updateCust', {
					cid: this.updateCustDataForm.cid,
					custName: this.updateCustDataForm.custName,
					custMobile: this.updateCustDataForm.custMobile,
					custAddress: this.updateCustDataForm.custAddress,
					custTicket: this.updateCustDataForm.custTicket
				}).then((resp) => {
					// 条件成立：修改成功，否则修改失败
					if (resp.data.responseData != null) {
						this.$message.success("修改成功");
					} else {
						this.$methods.error("修改失败");
					}
					// 隐藏对话框
					this.updateBox = false;
					// 重新查询修改之后的客户信息
					this.listCustomer();
				}).catch((error) => {
					this.$message.error("修改客户信息请求发送失败");
					console.log(error);
				})

			},
		},
		// vue实例生成之后调用该函数，获取页面初始化所需要的数据
		created() {
			this.listCustomer();
		}
	}
</script>
